<!-- 蓝色简洁登录页面 -->
<template>
	<view class="t-login">
		<!-- 页面装饰图片 -->
		<image class="img-a" src="/static/img/b-1.png"></image>
		<image class="img-b" src="/static/img/b-2.png"></image>
		<!-- 标题 -->
		<view v-show="isLogin == 1">
			<view class="t-b">{{ title }}</view>
			<view class="t-b2">{{ subTitle }}</view>
			<form class="cl">
				<!-- 登录账号 -->
				<view class="login-form-item">
					<u-input v-model="username" placeholder="请输入登录用户名" maxlength="30">
						<u-icon slot="prefix" name="account" size="35px"></u-icon>
					</u-input>
				</view>
				<!-- 登录密码 -->
				<view class="login-form-item">
					<u-input v-model="password" type="password" placeholder="请输入登录密码" maxlength="16">
						<u-icon slot="prefix" name="lock" size="35px"></u-icon>
					</u-input>
				</view>
				<!-- 图形验证码 -->
				<view class="login-form-item t-captcha">
					<u-input v-model="captchaCode" placeholder="请输入验证码" maxlength="4">
						<u-icon slot="prefix" name="fingerprint" size="35px"></u-icon>
					</u-input>
					<view class="code-img-wrapper" @click="updateImageCode">
						<canvas
							style="width: 114px;height: 44px;border: 1px solid #e9e9e9;border-radius: 26px;background: #f8f7fc;"
							canvas-id="canvas"></canvas>
					</view>
				</view>
				<button @tap="login(isLogin)">登 录</button>
			</form>
		</view>
		<view class="login">
			<view v-show="isLogin == 2" class="loginBox" style="margin-top: 15vh;">
				<view class='loginBase loginTitre'>
					<p>欢迎来到房千千服务系统</p>
					<span>欢迎登录</span>
				</view>
				<view class="loginBox" style="padding: 26px 0;">
					<!-- <view style="text-align: center;">
					<image src="../../static/logo.png" mode="aspectFill" style="width: 160rpx;height: 160rpx;">
					</image>
				</view> -->
					<view class="logo flex_start">
						<image src="../../static/img/phone.png" mode="aspectFill"></image>
						<u-input type="number" size='mini' v-model="phone" placeholder="请输入手机号码"
							border="none"></u-input>
					</view>
					<view class="logo flex_start">
						<view style="width: 40px;">
							<u-icon name="hourglass-half-fill" size="25" color="#b9b9b9"></u-icon>
						</view>
						<u-input v-model="code" placeholder="请输入验证码" border="none"></u-input>
						<view>
							<u-code :seconds="seconds" @end="end" @start="start" ref="uCode"
								@change="codeChange"></u-code>
							<u-button @tap="getCode" size="small" style="height: 36px; ">{{ tips }}</u-button>
						</view>
					</view>
					<view class="logo_btn" :style="{ 'backgroundColor': phone ? '#3544ff' : '#3544ff' }"
						@click="login(isLogin)">
						登录
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
import * as CaptchaApi from '@/api/captcha'
import { isEmpty } from '@/utils/verify.js'
import { Mcaptcha } from '@/utils/mcaptcha.js'
import { verification, getCode, postVerifyCode } from '@/api/api'
export default {
	data() {
		return {
			title: '房千千管理系统',
			subTitle: '欢迎回来，开始工作吧！',
			// 图形验证码信息
			captcha: null,
			// 登录账号
			username: '',
			// 密码
			password: '',
			// 图形验证码
			captchaCode: '',
			uuid: '',
			isLogin: 2,
			system: '',
			phone: '',
			code: '',
			seconds: 60,
			tips: '获取验证码',
			isLoading: false,
		};
	},

	onReady() {
		setTimeout(() => {
			this.mcaptcha = new Mcaptcha({
				el: 'canvas',
				width: 114,
				height: 40,
				createCodeImg: ""
			});
			this.mcaptcha.refresh();
		}, 300);
		this.system = uni.getSystemInfoSync();
		// this.verification()
	},
	onLoad() {
		this.system = uni.getSystemInfoSync();
		// this.verification()
	},
	created() {

	},
	methods: {

		getCode() {
			if (isEmpty(this.phone)) {
				uni.$u.toast('请输入手机号码');
				return;
			}
			if (!/^1[3456789]\d{9}$/.test(this.phone)) {
				uni.$u.toast('请输入正确的手机号码');
				return;
			}
			if (this.$refs.uCode.canGetCode) {
				// 模拟向后端请求验证码
				uni.showLoading({
					title: '正在获取验证码'
				})
				getCode({
					cellphone: this.phone,
					deviceBrand: this.system.deviceBrand ? this.system.deviceBrand : this.system.model,
				}).then(res => {
					if (res.code == 200) {
						uni.hideLoading();
						// 这里此提示会被this.start()方法中的提示覆盖
						uni.$u.toast('验证码已发送');
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start();
					} else {
						uni.$u.toast(res.msg);
					}
				}).catch(err => {
					console.error(err);
				});

			} else {
				uni.$u.toast('倒计时结束后再发送');
			}
		},


		codeChange(text) {
			this.tips = text;
		},
		end() {
			// uni.$u.toast('倒计时结束');
			this.tips = '重新获取验证码';
			this.seconds = 60;

		},
		start() {
			// uni.$u.toast('倒计时开始');
		},

		verification() {
			console.log(this.system)
			verification({
				deviceBrand: this.system.deviceBrand ? this.system.deviceBrand : this.system.model,
			}).then(res => {
				if (res.code == 200) {
					this.isLogin = res.data.status
				}
			})
		},

		// 刷新验证码
		updateImageCode() {
			this.mcaptcha.refresh()
		},
		// 验证表单内容
		validItem() {
			const app = this
			if (isEmpty(app.username)) {
				uni.$u.toast('请输入登录用户名')
				return false
			}
			if (isEmpty(app.password)) {
				uni.$u.toast('请输入登录密码')
				return false
			}
			if (isEmpty(app.captchaCode)) {
				uni.$u.toast('请输入验证码')
				return false
			}
			let validate = this.mcaptcha.validate(app.captchaCode)
			if (!validate) {
				uni.$u.toast('图形验证码错误')
				return false
			}
			return true
		},
		// 确认登录
		login(type) {
			if (type == 1) {
				const app = this
				let valid = app.validItem();
				if (valid) {
					app.isLoading = true
					app.$store.dispatch('Login', {
						username: app.username,
						password: app.password,
						loginType: 'app',
						uuid: app.uuid
					}).then(result => {
						if (result.code == 200) {
							uni.switchTab({  // ← 改用switchTab（如果首页是tabbar页面）
								url: '/pages/index/index'
							})
							return
						}
					})
						.catch(err => {
							app.captchaCode = ''
						})
						.finally(() => app.isLoading = false)
				}
			} else if (type == 2) {
				if (isEmpty(this.phone)) {
					uni.$u.toast('请输入手机号码');
					return;
				}
				if (isEmpty(this.code)) {
					uni.$u.toast('请输入验证码');
					return;
				}
				// 把手机号和验证码放在缓存里
				uni.setStorageSync('phone', this.phone);
				uni.setStorageSync('code', this.code);

				postVerifyCode({
					cellphone: this.phone,
					smsCode: this.code,
				}).then(res => {
					if (res.code == 200) {
						// 登录
						uni.switchTab({  // ← 改用switchTab（如果首页是tabbar页面）
							url: '/pages/index/index'
						})

					} else {
						uni.$u.toast(res.msg);
					}
				}).catch(err => {
					console.error(err);
				});
			}

		},
	}
};
</script>
<style lang="scss" scoped>
@import 'index.scss';

.code-img-wrapper {
	position: relative;
	width: 114px;
	height: 44px;
	margin-left: auto;
	margin-right: 0;
}

.login {
	height: 100%;
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;

	.loginBase {

		// color: #fff;
		display: flex;
		align-items: start;
		justify-content: center;
		flex-direction: column;
	}

	.loginTitre {
		height: 200rpx;
		font-size: 40rpx;
		// margin-top: 20rpx;
	}

	.loginBtn {
		align-items: center;
		height: 200rpx;
		font-size: 20rpx;
	}

	.loginBox {
		display: inline-block;
		// flex: 1;
		// background-color: #fff;
		border-radius: 20rpx;
		padding: 50rpx;


		.logo {
			// width: 534rpx;
			border-bottom: 1rpx solid #c8c8c8;
			padding: 40rpx 10rpx 10rpx;

			image {
				margin-right: 20rpx;
				width: 50rpx;
				height: 50rpx;
			}

			::v-deep .uni-input-placeholder {
				font-size: 24rpx;
			}
		}

		.logo_btn {
			height: 80rpx;
			width: 100%;
			color: #fff;
			// background-color: #EAC04B;
			border-radius: 80rpx;
			text-align: center;
			line-height: 80rpx;
			margin: 70rpx 0 60rpx;
		}

		.register {
			text-align: center;
			// margin-top: ;
			color: #EAC04B;
			font-size: 24rpx;
		}

		.flex_start {
			display: flex;
			align-items: center;

		}
	}
}

.code-img-wrapper canvas {
	display: block !important;
	/* 强制显示 */
}
</style>
